<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>地址管理</title>



    <style>
        body{
            font-family: 宋体;
        }
        .address-left{
            width: 220px;
            height: 280px;
            margin-left: 350px;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid #848484;
            float: left;
            border-collapse: collapse;
            box-sizing: border-box;
        }
        .address-left tr{
            height: 40px;
            /* border: 1px solid #848484; */
        }
        .address-left1-1{
            background-color: #f27521;
            color: white;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        /* .address-left2,.address-left3 tr{
            border: 1px solid #848484;
        } */
        .address-left2{
            background-color: #f4f4f4;
            font-weight: bold;
            width: 100%;
            border-bottom: 3px solid orange;
        }
        /* .address-left2-1{
            height: 3px;
            width: 100%;
            border-bottom: 3px solid orange;
        }
         */
        .address-left2-1>img{
            height: 30px;
            padding-top: 5px;
            box-sizing: border-box;
            margin-left: 5px;
        }
        .address-left2-1{
            line-height: 30px;

        }
        .address-left3{
            border-bottom: 1px dashed darkgray;
        }
        .address-right{
            width: 850px;
            height: 600px;
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            border: 1px solid black;
            float: left;
        }
        .address-right-head{
            height: 40px;
            width: 850px;
            margin-top: 10px;
            margin-left: 10px;
            /* border: 1px solid black; */
            border-collapse: collapse;
        }
        .address-right-head1{

            border-bottom: 2px solid orange;
        }
        .address-right-head3{
            width: 100px;
            height: 30px;
            background-color: #ef771f;
            color: white;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
        }
        .address-right-centent{
            height: 200px;
            width: 850px;
            margin-top: 40px;
            margin-left: 10px;
            /* float: left; */
            border: 1px solid darkgray;
            border-collapse: collapse;
        }
        .address-right-centent tr{
            /* border-bottom: 1px solid #848484; */
        }
        .address-right-centent1,.address-right-centent2{
            height: 50px;
        }
        .address-right-centent1-1{
            font-weight: bold;
            padding-left: 40px;
            line-height: 40px;
            border-bottom: 1px solid #848484;
        }
        .address-right-centent2-1,.address-right-centent2-2{
            width: 150px;
            text-align: center;
            border-bottom: 1px solid #848484;
        }
        .address-right-centent2-3{
            width: 250px;
            text-align: center;
            border-bottom: 1px solid #848484;
        }
        #address-right-centent2{
            background-color: #fcf4d6;
            font-weight: bold;
        }
        .address-right-centent a{
            text-decoration: none;
        }
        .address-right-bottom{
            height: 450px;
            width: 850px;
            margin-top: 10px;
            margin-left: 10px;
            /* float: left; */
            border: 4px solid #fef3d7;
            border-bottom: 30px solid #fef3d7;
            border-collapse: collapse;
        }
        .address-right-bottom1{
            height: 60px;
            background-color: #fef3d7;
            margin-bottom: 10px;
        }
        .address-right-bottom1-1{
            width: 200px;
            height: 40px;
            margin-top: 20px;
            background-color: #FFFFFF;
            margin-left: 20px;
            line-height: 40px;
            padding-left: 20px;
            font-weight: bold;
        }
        .address-right-bottom2 tr{
            height: 40px;
            margin-top: 40px;
        }
        .address-right-bottom2-title{
            /* margin-top: 30px; */
            width: 140px;
            text-align: right;
            font-weight: bold;
        }
        .address-right-bottom2-text{
            /* margin-top: 30px; */
            width: 650px;
            padding-left: 10px;
            color: #848484;
        }
        .address-right-bottom2-text input[type="text"]{
            width: 280px;
            height: 30px;
            margin-right: 20px;
        }
        .address-right-bottom2-text select{
            width: 100px;
            height: 25px;
            /* margin-top: 20px; */
        }
        .address-right-bottom3-1,.address-right-bottom3-2{
            float: left;
            width: 60px;
            height: 40px;
            background-color: #fdad46;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
        }
        .address-right-bottom3-2{
            margin-left: 20px;
        }
        .address-font{
            color: orange;
        }

    </style>
</head>
<body>
<%--商城页抬头--%>
<%@include file="headtop.jsp"%>
<%--商城头分类--%>
<%@include file="headmid.jsp"%>
<%--搜索框引入--%>
<%@ include file="search.jsp"%>


<!-- 会员中心 -->
<table class="address-left">
    <tr class="address-left1">
        <td>
            <div class="address-left1-1">会员中心</div>
        </td>
    </tr>
    <tr class="address-left2">
        <td>
            <div class="address-left2-1">
                <img  src="${pageContext.request.contextPath}/img/trading.png"/>
                交易记录</div>
        </td>
    </tr>
    <tr class="address-left3">
        <td>
            <ul type="square" >
                <li>我的订单</li>
            </ul>
        </td>
    </tr>
    <tr class="address-left2">
        <td>

            <div class="address-left2-1">
                <img src="${pageContext.request.contextPath}/img/setting.png"/>
                个人设置</div>
        </td>
    </tr>
    <tr class="address-left3">
        <td>
            <ul type="square">
                <li>地址管理</li>
            </ul>
        </td>
    </tr>
    <tr class="address-left3">
        <td>
            <ul type="square">
                <li>修改头像</li>
            </ul>
        </td>
    </tr>
    <tr class="address-left3">
        <td>
            <ul type="square">
                <li>修改密码</li>
            </ul>
        </td>
    </tr>
</table>


<!-- 地址管理 -->
<table calss="address-right">
    <tr>
        <td>
            <table class="address-right-head">
                <tr class="address-right-head1">
                    <td class="address-right-head2">
                        <div class="address-right-head3">
                            地址管理
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td>
            <table class="address-right-centent">

                <tr class="address-right-centent1">
                    <td colspan="5">
                        <div class="address-right-centent1-1">
                            已保存的有效地址
                        </div>
                    </td>
                </tr>
                <tr id="address-right-centent2" class="address-right-centent2">
                    <td class="address-right-centent2-1">
                        收货人
                    </td>
                    <td class="address-right-centent2-2">
                        所在地区
                    </td>
                    <td class="address-right-centent2-3">
                        街道地址
                    </td>
                    <td class="address-right-centent2-2">
                        手机
                    </td>
                    <td class="address-right-centent2-1">
                        操作
                    </td>
                </tr>
                <tr class="address-right-centent2">
                    <td class="address-right-centent2-1">
                        张三
                    </td>
                    <td class="address-right-centent2-2">
                        南充
                    </td>
                    <td class="address-right-centent2-3">
                        竹溪桥街
                    </td>
                    <td class="address-right-centent2-2">
                        13244425521
                    </td>
                    <td class="address-right-centent2-1">
                        <a href="#">修改</a>
                        |默认地址
                    </td>
                </tr>
                <tr class="address-right-centent2">
                    <td class="address-right-centent2-1">
                        张三
                    </td>
                    <td class="address-right-centent2-2">
                        南充
                    </td>
                    <td class="address-right-centent2-3">
                        竹溪桥街
                    </td>
                    <td class="address-right-centent2-2">
                        13244425521
                    </td>
                    <td class="address-right-centent2-1">
                        <a href="#">修改</a>
                        |默认地址
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td>
            <table class="address-right-bottom">
                <tr class="address-right-bottom1">
                    <td colspan="2">
                        <div class="address-right-bottom1-1">
                            收货地址
                        </div>
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font">*</font>收货人姓名:
                        </div>
                    </td>
                    <td >
                        <div class="address-right-bottom2-text">
                            <input type="text" />收货人真实姓名,方便快递公司联系。
                        </div>
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font">*</font>所在地区:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <select name="province" id="province" onclick="changeCity()">
                            <option value="" >请选择省</option>
                        </select>
                        <select name="city" id="city">
                            <option value="">请选择市</option>
                        </select>
                        <select name="quiz3">
                            <option value="">请选择县/区</option>
                            <option value="西湖区">西湖区</option>
                            <option value="余杭区">余杭区</option>
                            <option value="拱墅区">临安市</option>
                        </select>
                        <script type="text/javascript">
                            addressInit('cmbProvince', 'cmbCity', 'cmbArea');
                        </script>
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            <font class="address-font">*</font>街道地址:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <input type="text" />真实详细收货地址,方便快递公司联系。
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            手机号码:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <input type="text" />手机号码,如:13256457645
                    </td>
                </tr>
                <tr class="address-right-bottom2">
                    <td >
                        <div class="address-right-bottom2-title">
                            设为默认:
                        </div>
                    </td>
                    <td class="address-right-bottom2-text">
                        <input type="checkbox"/>
                    </td>
                </tr>
                <tr class="address-right-bottom3">
                    <td >
                    </td>
                    <td >
                        <div class="address-right-bottom3-1">
                            保存
                        </div>
                        <div class="address-right-bottom3-2">
                            取消
                        </div>
                    </td>
                </tr>
                <tr class="address-right-bottom4">
                    <td colspan="2">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>

</body>

</html>